<template>
  <view>
    <view v-if="swiperList.length > 0" class="homeSwiper">
      <swiper
        class="homeSwiper-swiper"
        :indicator-dots="false"
        :autoplay="composeDecorationStore().autoplay"
        :circular="true"
        :vertical="false"
        :interval="2000"
        :duration="500"
        :previous-margin="defaulvalue + 'px'"
        :next-margin="defaulvalue + 'px'"
        :style="'height: ' + height + 'rpx'"
        @change="onChange"
      >
        <swiper-item
          v-for="(item, index) in swiperList"
          :key="index"
          class="homeSwiper-swiper__item"
          :data-index="index"
          @tap.stop="handleTap(index)"
        >
          <view class="homeSwiper-swiper__image" :style="'padding: 2px ' + padding / 2 + 'px'" :class="{ swiperActive: index === curent }">
            <!-- #ifndef H5 -->
            <image
              :data-index="index"
              :data-key="item.img"
              :class="'skeleton--animate ' + ('homeSwiper-swiper--angle' + imageAngle)"
              :src="item.img"
              :lazy-load="true"
            ></image>
            <!-- #endif -->
            <!-- #ifdef H5 -->
            <img
              :data-index="index"
              :data-key="item.img"
              :class="'skeleton--animate ' + ('homeSwiper-swiper--angle' + imageAngle)"
              :src="item.img"
              style="object-fit: cover; width: 100%; height: 100%"
            />
            <!-- #endif -->
            <button v-if="item.link.type === 0 && item.link.id === 8" open-type="contact" class="contact-style"></button>
          </view>
        </swiper-item>
      </swiper>
      <view v-if="swiperList.length > 1">
        <view v-if="indicator === 1" class="homeSwiper-swiper__indicator homeSwiper-swiper__icat1">
          <text v-for="(ix, idx) in swiperList.length" :key="idx" :class="curent === idx ? 'homeSwiper-swiper__icat1--active' : ''"></text>
        </view>
        <view v-if="indicator === 3" class="homeSwiper-swiper__indicator homeSwiper-swiper__icat3">
          <text v-for="(ix, idx) in swiperList.length" :key="idx" :class="curent === idx ? 'homeSwiper-swiper__icat3--active' : ''"></text>
        </view>
        <view v-if="indicator === 2" class="homeSwiper-swiper__indicator homeSwiper-swiper__icat2" :style="'right: ' + (padding + 5) + 'px'">
          <text>{{ curent + 1 }}/{{ swiperList.length }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, PropType, onMounted } from 'vue'
import type { SwiperFormData, SwiperListItem } from '../types'
import { composeDecorationStore } from '@/store/modules/composedecoration'
// #ifndef H5
import linkNavTo from '@/libs/linkNavTo'

// #endif

const $props = defineProps({
  decorationProperties: {
    type: Object as PropType<SwiperFormData>,
    default() {
      return {}
    },
  },
})
const type = ref('')
const swiperList = ref<SwiperListItem[]>([])
const padding = ref(10)
/** 图片样式 1常规 2投影 */
const imageStyle = ref(1)
/** 图片倒角 1直角 2圆角 */
const imageAngle = ref(1)
/** 指示器 1样式一 2样式二 3样式三 */
const indicator = ref(1)
/** 样式 */
const ImageClass = ref('')
/** 当前轮播序列号 */
const curent = ref(0)
/** 图片高度 */
const height = ref(185)
const defaulvalue = ref('0')

onMounted(() => {
  getProperties()
  getImageClass()
  initBackground() // 组合组件动态模糊层
})

/**
 * 默认取组合组件第一张
 */
const initBackground = () => {
  if (swiperList.value.length > 2) {
    defaulvalue.value = '30'
  }
  if ($props.decorationProperties.bgType !== 'color') {
    composeDecorationStore().setBackground(swiperList.value[0].img)
  }
}

const handleTap = (idx: number) => {
  const currentSwiperItem = swiperList.value[idx]
  const itemLink = currentSwiperItem.link
  // #ifndef H5
  linkNavTo(itemLink)
  // #endif
  // #ifdef H5
  import('@/libs/linkNavTo').then(({ default: linkNavTo }) => {
    linkNavTo(itemLink)
  })
  // #endif
}

const onChange = (e: { detail: { current: number } }) => {
  if ($props.decorationProperties.bgType !== 'color') {
    // curent.value = e.detail.current
    const img = swiperList.value[e.detail.current].img
    composeDecorationStore().setBackground(img)
  }
  curent.value = e.detail.current
}
function getProperties() {
  type.value = $props.decorationProperties.type
  swiperList.value = $props.decorationProperties.swiperList
  padding.value = $props.decorationProperties.padding
  imageStyle.value = $props.decorationProperties.imageStyle
  imageAngle.value = $props.decorationProperties.imageAngle
  indicator.value = $props.decorationProperties.indicator
  height.value = $props.decorationProperties.height
}
function getImageClass() {
  // 1常规 2投影
  const styles = ['homeSwiper-swiper__boxNM', 'homeSwiper-swiper__boxCP']
  // 图片倒角 1直角 2圆角
  const angles = ['homeSwiper-swiper__corners', 'homeSwiper-swiper__angle']
  const gs = styles[+imageStyle.value - 1]
  const as = angles[+imageAngle.value - 1]
  ImageClass.value = `${gs} ${as}`
}
</script>
<style lang="scss" scoped>
@include b(homeSwiper) {
  position: relative;
  margin-top: 20rpx;
}

@include b(homeSwiper-swiper) {
  height: 100%;

  @include e(item) {
    height: 100%;
  }

  @include e(image) {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;

    image,
    img {
      display: block;
      width: 100%;
    }

    image {
      height: 100%;
    }
  }

  @include m(angle1) {
    border-radius: 0rpx;
  }

  @include m(angle2) {
    border-radius: 8rpx;
  }

  @include e(boxNM) {
    box-shadow: none;
  }

  @include e(boxCP) {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  }

  @include e(corners) {
    border-radius: 0px;
  }

  @include e(angle) {
    border-radius: 7px;
  }

  @include e(indicator) {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 10px;
    // border: 1px solid red;
    height: 20px;
    width: 100%;
    box-sizing: border-box;
  }

  @include e(icat1) {
    text {
      display: inline-block;
      width: 8px;
      height: 8px;
      background-color: #ebedf0;
      opacity: 0.3;
      margin-right: 6px;
      border-radius: 50%;
    }

    @include m(active) {
      opacity: 0.8 !important;
      background-color: #fff !important;
    }
  }

  @include e(icat2) {
    position: absolute;
    right: 0;
    bottom: 15px;
    display: block;

    text {
      float: right;
      box-sizing: border-box;
      padding: 5px 12px;
      background-color: rgba(0, 0, 0, 0.2);
      color: #fff;
      font-size: 13px;
      border-radius: 16px;
    }
  }

  @include e(icat3) {
    text {
      display: inline-block;
      width: 22px;
      height: 3px;
      background-color: #ebedf0;
      opacity: 0.3;
      margin-right: 6px;
      border-radius: 4px;
    }

    @include m(active) {
      opacity: 0.8 !important;
      background-color: #fff !important;
    }
  }
}

@include b(contact-style) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.swiperActive {
  transform: scale(1, 1) !important;
  transition: all 0.9s;
}
.homeSwiper-swiper__image {
  transform: scale(1, 0.9);
  transition: all 0.9s;
}
</style>
